<template>
  <a-card :bordered="false">

    <!-- 查询区域-start -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="refreshTable">
        <a-row :gutter="12">
          <a-col :md="7" :sm="8">
            <a-form-item label="字典名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入字典名称" v-model="queryParam.dictName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <a-form-item label="字典编号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入字典编号" v-model="queryParam.dictCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="refreshTable" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-end -->

    <!-- 操作按钮区域-start -->
    <div class="table-operator" style="border-top: 5px">
      <a-button type="primary" icon="plus" @click="handleAdd">添加</a-button>
      <a-button type="primary" icon="download">导出</a-button>
      <a-button type="primary" icon="sync">刷新缓存</a-button>
      <a-button type="primary" icon="hdd">回收站</a-button>
    </div>
    <!-- 操作按钮区域-end -->

    <!-- table区域-begin -->
    <div>
      <s-table
        ref="table"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
      >

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a @click="editDictItem(record)"><a-icon type="setting"/> 字典配置</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>

        </span>
      </s-table>
    </div>
    <!-- table区域-end -->

    <dict-modal ref="modalForm" @ok="refreshTable"></dict-modal>
    <dict-item-list ref="dictItemList"></dict-item-list>

  </a-card>
</template>

<script>
import { STable } from '@/components'
import { apiDelDict, apiQueryDictList } from '@/api/system'
import DictItemList from './DictItemList'
import DictModal from './modules/DictModal'

const columns = [{
  title: '#',
  dataIndex: '',
  key: 'rowIndex',
  width: 120,
  align: 'center',
  customRender: function (t, r, index) {
    return parseInt(index) + 1
  }
},
  {
    title: '字典名称',
    align: 'left',
    dataIndex: 'dictName'
  },
  {
    title: '字典编号',
    align: 'left',
    dataIndex: 'dictCode'
  },
  {
    title: '描述',
    align: 'left',
    dataIndex: 'description'
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }]

export default {
  name: 'DictList',
  components: {
    STable, DictItemList, DictModal
  },
  data () {
    return {
      /* 查询参数 */
      queryParam: {},
      columns,
      loadData: parameter => {
        return apiQueryDictList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      }
    }
  },
  methods: {
    searchReset () {
      this.queryParam = {}
      this.refreshTable()
    },
    refreshTable () {
      this.$refs.table.refresh(true)
    },
    handleAdd () {
      this.$refs.modalForm.show('新增')
    },
    handleEdit (record) {
      this.$refs.modalForm.show('编辑', record)
    },
    handleDelete (id) {
      apiDelDict({ id: id }).then(res => {
        console.log(res)
      }).finally(() => {
        this.refreshTable()
      })
    },
    // 编辑字典数据
    editDictItem (record) {
      this.$refs.dictItemList.show('字典列表', record)
    }

  }
}
</script>
<style scoped>

/*列表上方操作按钮区域*/
.ant-card-body .table-operator {
  margin-bottom: 8px;
}
/** Button按钮间距 */
.table-operator .ant-btn {
  margin: 0 8px 8px 0;
}
.table-operator .ant-btn-group .ant-btn {
  margin: 0;
}

.table-operator .ant-btn-group .ant-btn:last-child {
  margin: 0 8px 8px 0;
}
/*列表td的padding设置 可以控制列表大小*/
.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}

/*列表页面弹出modal*/
.ant-modal-cust-warp {
  height: 100%
}

/*弹出modal Y轴滚动条*/
.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

/*弹出modal 先有content后有body 故滚动条控制在body上*/
.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}
/*列表中有图片的加这个样式 参考用户管理*/
.anty-img-wrap {
  height: 25px;
  position: relative;
}
.anty-img-wrap > img {
  max-height: 100%;
}
/*列表中范围查询样式*/
.query-group-cust{width: calc(50% - 10px)}
.query-group-split-cust:before{content:"~";width: 20px;display: inline-block;text-align: center}

/*erp风格子表外框padding设置*/
.ant-card-wider-padding.cust-erp-sub-tab>.ant-card-body{padding:5px 12px}

/* 内嵌子表背景颜色 */
.j-inner-table-wrapper /deep/ .ant-table-expanded-row .ant-table-wrapper .ant-table-tbody .ant-table-row {
  background-color: #FFFFFF;
}

/**隐藏样式-modal确定按钮 */
.jee-hidden{display: none}
</style>
